<script>
import outMain from "@/components/outMain.vue";

import { ElMessage, ElMessageBox } from "element-plus";
import { CrewhallDetail, connectRecord } from "@/http/api";
export default {
  components: { outMain },
  name: "",
  data() {
    return {
      detailId: this.$route.query.id,
      showTalk: false,
      maskItem: {},
      stepArr: [
        { name: "基本信息", id: 1 },
        { name: "船员证书", id: 2 },
        { name: "工作经历", id: 3 },
        { name: "沟通记录", id: 4 },
      ],
      stepId: 1,
      tableData: [],
      zsArr: [],
      expArr: [],
      queryData: {
        biographical_notes_id: this.$route.query.id,
        page: 1,
        per_page: 10,
      },
      total: 0,
      formData: {},
    };
  },
  props: {},
  setup() {},
  methods: {
    navFn(item) {
      this.stepId = item.id;
      if (item.id > 3) {
        this.queryData.page = 1;
        this.serchFn();
      }
    },
    serchFn() {
      if (this.stepId === 4) {
        this.getTalk();
      }
    },
    getData() {
      CrewhallDetail({ biographical_notes_id: this.detailId }).then((res) => {
        if (res.data.code == 1) {
          let resData = res.data.data;
          let cy_label = [];
          if (resData.cy_label) {
            cy_label = resData.cy_label.split(",");
          }
          let label_data = [];
          if (resData.label_data) {
            label_data = resData.label_data.split(",");
          }
          let all_label = cy_label.concat(label_data);
          if (all_label.length > 0) {
            resData["all_label"] = Array.from(new Set(all_label));
          } else {
            resData["all_label"] = [];
          }
          this.formData = resData;
          this.zsArr = resData.zs_json.filter((item) => {
            return item.number;
          });
          this.expArr = JSON.parse(resData.resume_experience);
        }
      });
    },
    async getTalk() {
      const { data } = await connectRecord(this.queryData);
      if (data.code == 1) {
        this.tableData = data.data.data;
        this.total = data.data.total;
      }
    },
    linkFn(url, id, navId) {
      if (id != 0) {
        this.$router.push({ path: url, query: { id: id, navId: navId } });
      }
    },
    backFn() {
      this.$router.back();
    },
  },
  mounted() {},
  created() {
    this.getData();
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formStep">
        <div class="formHead">
          <div>船员详情</div>
          <btn value="返回上一级" @ok="backFn"></btn>
        </div>
        <div class="formMain">
          <div class="stepNav">
            <div
              :class="stepId === item.id ? 'stepItemActive' : 'stepItem'"
              @click="navFn(item)"
              :key="index"
              v-for="(item, index) in stepArr"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="stepCont" v-show="stepId == 1">
            <div class="formDes">
              <div class="desTitle">基本信息</div>
              <div class="desCont">
                <div class="desItem">
                  <div class="desName">船员姓名</div>
                  <div class="desText">{{ formData.real_name }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">船员年龄</div>
                  <div class="desText">{{ formData.age }}岁</div>
                </div>
                <div class="desItem">
                  <div class="desName">船员职务</div>
                  <div class="desText">{{ formData.zw }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">证书等级</div>
                  <div class="desText">{{ formData.zs }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">工作经验</div>
                  <div class="desText">{{ formData.gzjy }}年</div>
                </div>

                <div class="desItem">
                  <div class="desName">船员学历</div>
                  <div class="desText">{{ formData.xl }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">船舶类型</div>
                  <div class="desText">{{ formData.cblx }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">航线要求</div>
                  <div class="desText">{{ formData.hxyq }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">期望月薪</div>
                  <div class="desText">{{ formData.qwyx }}（美元）</div>
                </div>
                <div class="desItem">
                  <div class="desName">择期登船</div>
                  <div class="desText">
                    {{ formData.zqdc_time || "- -" }}
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">船员国籍</div>
                  <div class="desText">
                    {{ formData.gj ? formData.gj : "- -" }}
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">所在地</div>
                  <div class="desText">
                    {{ formData.jg ? formData.jg : "- -" }}
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">出生地</div>
                  <div class="desText">
                    {{ formData.csd ? formData.csd : "- -" }}
                  </div>
                </div>
                <div class="desItem" v-if="formData.all_label">
                  <div class="desName">船员标签</div>
                  <div class="desText" v-if="formData.all_label.length > 0">
                    <el-tooltip
                      class="box-item"
                      effect="dark"
                      :content="formData.all_label.join(',')"
                      placement="top-start"
                    >
                      <el-tag>{{
                        formData.all_label.length + "个标签"
                      }}</el-tag>
                    </el-tooltip>
                  </div>
                  <div class="desText" v-if="formData.all_label.length == 0">
                    <el-tag>暂无标签</el-tag>
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">更新时间</div>
                  <div class="desText">{{ formData.update_time }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">手机号</div>
                  <div class="desText">{{ formData.mobile }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">身份证号</div>
                  <div class="desText">{{ formData.idcard }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">船员来源</div>
                  <div class="desText">
                    <el-tag v-if="formData.type == 1">小程序</el-tag>
                    <el-tag
                      type="warning"
                      v-if="formData.type == 2 || formData.type == 4"
                      >人才库</el-tag
                    >
                    <el-tag type="info" v-if="formData.type == 3">爬虫</el-tag>
                  </div>
                </div>
                <div class="desItem" v-if="formData.enterprise_name">
                  <div class="desName">所属企业</div>
                  <div class="desText">
                    <span
                      class="linkText_"
                      @click="
                        linkFn('/accountCompanyDetail', formData.enterprise_id)
                      "
                    >
                      {{ formData.enterprise_name }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="formDes" v-if="formData.jl_remark">
              <div class="desTitle">简历备注</div>
              <div class="desCont">
                <div class="desItem">
                  <div class="desText">{{ formData.jl_remark }}</div>
                </div>
              </div>
            </div>
            <div class="formDes" v-if="formData.zs_file">
              <div class="desTitle">证件照</div>
              <div class="desCont">
                <div
                  class="desImgItem"
                  :key="index"
                  v-for="(item, index) in formData.zs_file.split(',')"
                >
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="item"
                    fit="cover"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="stepCont" v-show="stepId == 2">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">
                <div>船员证书</div>
              </div>
              <el-table
                class="tableMain"
                :data="zsArr"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="name"
                  show-overflow-tooltip
                  label="证书名称"
                />
                <el-table-column
                  prop="number"
                  show-overflow-tooltip
                  label="证书编号"
                />
                <el-table-column
                  prop="time"
                  show-overflow-tooltip
                  label="到期时间"
                />
              </el-table>
            </div>
          </div>
          <div class="stepCont" v-show="stepId == 3">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">
                <div>工作经历</div>
              </div>
              <el-table
                class="tableMain"
                :data="expArr"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="comName"
                  show-overflow-tooltip
                  label="公司"
                />
                <el-table-column prop="zw" show-overflow-tooltip label="职务" />
                <el-table-column prop="cm" show-overflow-tooltip label="船名" />
                <el-table-column prop="cx" show-overflow-tooltip label="船型" />
                <el-table-column prop="hx" show-overflow-tooltip label="航区" />
                <el-table-column prop="zd" show-overflow-tooltip label="总吨" />
                <el-table-column prop="ml" show-overflow-tooltip label="马力" />
                <el-table-column
                  prop="scsj"
                  show-overflow-tooltip
                  label="上船时间"
                />
                <el-table-column
                  prop="xcsj"
                  show-overflow-tooltip
                  label="下船时间"
                />
              </el-table>
            </div>
          </div>
          <div class="stepCont" v-show="stepId == 4">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">
                <div>沟通此船员的记录（{{ total }}）</div>
              </div>
              <el-table
                class="tableMain"
                :data="tableData"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="staff_name"
                  show-overflow-tooltip
                  label="沟通企业"
                />
                <el-table-column
                  prop="connect_remark"
                  show-overflow-tooltip
                  label="沟通备注"
                />
                <el-table-column
                  prop="connect_label"
                  show-overflow-tooltip
                  label="沟通标签"
                />
                <el-table-column
                  prop="create_time"
                  show-overflow-tooltip
                  label="沟通时间"
                />
                <el-table-column
                  prop="last_connect_time"
                  show-overflow-tooltip
                  label="下次沟通时间"
                />
              </el-table>
              <div class="pageCont">
                <el-pagination
                  v-model:currentPage="queryData.page"
                  v-model:page-size="queryData.per_page"
                  background
                  layout="total, prev, pager, next, jumper"
                  :total="total"
                  @size-change="serchFn"
                  @current-change="serchFn"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
